<!doctype html>
<html>
	<head>
    <meta charset="UTF-8">
		<title>client side test for node-qrcode</title>
    <!--[if ie]><script type="text/javascript" src="vendors/excanvas/excanvas.js"></script><![endif]-->
    <script src="../build/qrcode.js"></script>
		<script src="../build/qrcode.tosjis.js"></script>
		<style>
      .container { display: flex; }
      .controls {
        display: flex; flex-direction: column;
        width: 100%;
        padding: 0 5px 0 5px;
        background-color: ghostwhite;
      }
      .controls > label { margin-bottom: 5px; margin-top: 10px; }
      .controls > textarea { flex: 1; margin-bottom: 10px; }
      .controls > input { width: 100%; margin: 0; padding: 0; flex: 1; }
      .qrcode-container {
        display: flex; align-items: center; justify-content: center;
        min-height: 300px; min-width: 300px; padding: 10px;
        background-color: ghostwhite;
      }
      .qrcode-image { box-shadow: 2px 2px 12px lightgray; }
      .error { color: red; max-width: 280px; }
    </style>
	</head>
	<body>
    <div class="container">
      <div class="controls" style="max-width: 320px;">
        <div class="container">
          <div class="controls">
            <label for="version">Version:</label>
            <select id="version" name="version">
              <option>Auto</option>
            </select>
          </div>
          <div class="controls">
            <label for="mode">Mode:</label>
            <select id="mode" name="mode">
              <option>Auto</option>
              <option>Numeric</option>
              <option>Alphanumeric</option>
              <option>Byte</option>
              <option>Kanji</option>
            </select>
          </div>
        </div>

        <div class="controls">
          <label for="errorLevel">Error Correction Level:</label>
          <select id="errorLevel" name="errorLevel">
            <option>Default</option>
            <option>Low</option>
            <option>Medium</option>
            <option>Quartile</option>
            <option>High</option>
          </select>
        </div>

        <div class="container">
          <div class="controls">
            <label for="margin">Margin:</label>
            <input id="margin" type="number" name="margin" min="4" value="4" />
          </div>
          <div class="controls">
            <label for="lightColor">Light color:</label>
            <input id="lightColor" type="color" name="light" value="#ffffff" />
          </div>
          <div class="controls">
            <label for="darkColor">Dark color:</label>
            <input id="darkColor" type="color" name="dark" value="#000000" />
          </div>
        </div>

        <div class="controls" style="flex: 1;">
          <label for="input-text">Text:</label>
          <textarea id="input-text">https://github.com/soldair/node-qrcode</textarea>
        </div>

      </div>
      <div class="qrcode-container">
        <p id="error" class="error"></p>
        <canvas id="canvas" class="qrcode-image"></canvas>
      </div>
    </div>

		<script>
      var errorEl = document.getElementById('error')
      var versionEl = document.getElementById('version')
      var errorLevelEl = document.getElementById('errorLevel')
      var modeEl = document.getElementById('mode')
      var marginEl = document.getElementById('margin')
      var lightColorEl = document.getElementById('lightColor')
      var darkColorEl = document.getElementById('darkColor')
      var canvasEl = document.getElementById('canvas')
      var textEl = document.getElementById('input-text')

      function debounce (func, wait, immediate) {
        var timeout
        return function () {
          var context = this
          var args = arguments
          var later = function () {
            timeout = null
            if (!immediate) func.apply(context, args)
          }

          var callNow = immediate && !timeout
          clearTimeout(timeout)
          timeout = setTimeout(later, wait)
          if (callNow) func.apply(context, args)
        }
      }

      function drawQR (text) {
        errorEl.style.display = 'none'
        canvasEl.style.display = 'block'

        QRCode.toCanvas(canvasEl, text, {
          version: versionEl.value,
          errorCorrectionLevel: errorLevelEl.options[errorLevelEl.selectedIndex].text,
          margin: marginEl.value,
          color: {
            light: lightColorEl.value,
            dark: darkColorEl.value
          },
          toSJISFunc: QRCode.toSJIS
        }, function (error, canvas) {
          if (error) {
            canvasEl.style.display = 'none'
            errorEl.style.display = 'inline'
            errorEl.textContent = error
          }
        })
      }

      var updateQR = debounce(function () {
        var mode = modeEl.options[modeEl.selectedIndex].text
        if (mode !== 'Auto') {
          drawQR([{ data: textEl.value, mode: mode }])
        } else {
          drawQR(textEl.value)
        }
      }, 250)

      versionEl.addEventListener('change', updateQR, false)
      errorLevelEl.addEventListener('change', updateQR, false)
      modeEl.addEventListener('change', updateQR, false)
      marginEl.addEventListener('change', updateQR, false)
      lightColorEl.addEventListener('change', updateQR, false)
      darkColorEl.addEventListener('change', updateQR, false)
      textEl.addEventListener('keyup', updateQR, false)

      for (var i = 1; i <= 40; i++) {
        versionEl.options[versionEl.options.length] = new Option(i.toString(), i)
      }

      drawQR(textEl.value)
		</script>

	</body>
</html>
